<!-- 新闻详情页 -->
<template>
  <div class="NewsDetail">
    <!-- 导航 吸顶 -->
    <van-sticky>
      <van-nav-bar title="新闻详情" left-arrow>
        <template #left>
          <van-icon name="arrow-left" color="#fff" @click="goBack">返回</van-icon>
        </template>
      </van-nav-bar>
    </van-sticky>

    <!-- 新闻内容 -->
    <div class="box">
      <!-- 标题 -->
      <div class="title">
        {{ news[index].title }}
      </div>
      <!-- 时间 -->
      <div class="time">
        {{ news[index].time }} <span>{{ news[index].src }}</span>
      </div>
      <!-- 内容 -->
      <div class="container" v-html="news[index].content"></div>
    </div>
    <xrzp-Istop></xrzp-Istop>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      // 反复尝试,是index为空字符串时报错,因为空字符串不能为下标
      // index:"",
      index: 0,
    };
  },
  // 借助mapState生成计算属性，从state中读取数据
  computed: {
    ...mapState(["news"]),
  },
  mounted() {
    this.index = this.$route.params.index;
    // console.log(this.$route.params);
    window.scrollTo(0, 0);
  },
  methods: {
    // 返回方法
    goBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<!-- v-html中的图片需要修改样式,不能用scope -->
<!-- 如果加scope 则需要用到穿透来修改样式 -->
<style lang="scss">
.NewsDetail {
  background-color: #f6f6f6;
  min-height: 100vh;
  .van-nav-bar {
    background-color: $base-color;
    .van-nav-bar__title{
      font-weight: bold;
    }
    .van-icon{
      font-weight: bold;
    }
  }
  .box {
    box-sizing: border-box;
    padding: 10px;
    .title {
      text-align: justify;
      font-size: 18px;
      font-weight: 700;
      padding: 0 0 0.2rem;
      color: #404040;
    }
    .time {
      font-size: 10px;
      font-weight: 700;
      padding: 0 0 0.2rem;
      color: #404040;
      span {
        margin-left: 10px;
      }
    }
    .container {
      text-align: justify;
      width: 100%;
      overflow: hidden;
      // div[sax-type="proxy"] {
      //   display: none;
      // }
      // section[class="weibo_p"]{
        // .weibo_img{
        //   .img_width{
        //     width: 50px;
        //   }
        // }
        // .weibo_img_g_img{
        //   .img_width{
        //     width: 180px;
        //   }
        // }
      // }
      // p:nth-child(1) {
      //   display: none;
      // }
      video , img {
        max-width: 100%;
      }
      h2 , b , strong {
        font-size: 14px;
      }
      figure{
        margin: 0;
      }
      p {
        margin: 0.6rem 0;
        text-indent: 2em;
      }
    }
  }
}
</style>
